<!DOCTYPE html>
<title>calc-size() on height, with border/padding/margin/box-sizing</title>
<link rel="help" href="https://drafts.csswg.org/css-values-5/#calc-size">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  #container {
    display: inline-block;
    font-size: 20px;
  }
  #target {
    width: 123px;
    border-style: solid;
    border-width: 1px 20px 3px 20px;
    padding: 3px 20px 5px 20px;
    margin:  2px 20px 1px 20px;
  }
  #child {
    width: 20px;
    height: 7px;
  }
</style>

<div id="container">
  <div id="target">
    <div id="child"></div>
  </div>
</div>

<script>

let tests = [
  {
    styles: {
      "height": "auto",
    },
    expected_target_computed: "7px",
    expected_target_border_box: 19,
    expected_container: 22,
  },
  {
    styles: {
      "height": "auto",
      "box-sizing": "border-box",
    },
    expected_target_computed: "19px",
    expected_target_border_box: 19,
    expected_container: 22,
  },
  {
    styles: {
      "height": "calc-size(auto, size)",
    },
    expected_target_computed: "7px",
    expected_target_border_box: 19,
    expected_container: 22,
  },
  {
    styles: {
      "height": "calc-size(auto, size)",
      "box-sizing": "border-box",
    },
    expected_target_computed: "19px",
    expected_target_border_box: 19,
    expected_container: 22,
  },
  {
    styles: {
      "height": "calc-size(auto, size * 2)",
    },
    expected_target_computed: "14px",
    expected_target_border_box: 26,
    expected_container: 29,
  },
  {
    styles: {
      "height": "calc-size(auto, size * 2)",
      "box-sizing": "content-box", /* just one test with explicit initial value */
    },
    expected_target_computed: "14px",
    expected_target_border_box: 26,
    expected_container: 29,
  },
  {
    styles: {
      "height": "calc-size(auto, size * 2)",
      "box-sizing": "border-box",
    },
    expected_target_computed: "38px",
    expected_target_border_box: 38,
    expected_container: 41,
  },
  {
    styles: {
      "height": "calc-size(min-content, size * 2)",
    },
    expected_target_computed: "14px",
    expected_target_border_box: 26,
    expected_container: 29,
  },
  {
    styles: {
      "height": "calc-size(fit-content, size * 2)",
      "box-sizing": "border-box",
    },
    expected_target_computed: "38px",
    expected_target_border_box: 38,
    expected_container: 41,
  },
  {
    styles: {
      "min-height": "calc-size(min-content, size * 2)",
    },
    expected_target_computed: "14px",
    expected_target_border_box: 26,
    expected_container: 29,
  },
  {
    styles: {
      "min-height": "calc-size(fit-content, size * 2)",
      "box-sizing": "border-box",
    },
    expected_target_computed: "38px",
    expected_target_border_box: 38,
    expected_container: 41,
  },
  {
    styles: {
      "height": "200px",
      "max-height": "calc-size(min-content, size * 2)",
    },
    expected_target_computed: "14px",
    expected_target_border_box: 26,
    expected_container: 29,
  },
  {
    styles: {
      "height": "200px",
      "max-height": "calc-size(fit-content, size * 2)",
      "box-sizing": "border-box",
    },
    expected_target_computed: "38px",
    expected_target_border_box: 38,
    expected_container: 41,
  },
  {
    styles: {
      "height": "calc-size(11px, size * 2)",
    },
    expected_target_computed: "22px",
    expected_target_border_box: 34,
    expected_container: 37,
  },
  {
    styles: {
      "height": "calc-size(11px, size * 2)",
      "box-sizing": "border-box",
    },
    expected_target_computed: "22px",
    expected_target_border_box: 22,
    expected_container: 25,
  },
];
const container = document.getElementById("container");
const container_cs = getComputedStyle(container);
const target = document.getElementById("target");
const target_cs = getComputedStyle(target);
for (const obj of tests) {
  test((t) => {
    for (const prop in obj.styles) {
      target.style.setProperty(prop, obj.styles[prop]);
    }
    t.add_cleanup(() => {
      for (const prop in obj.styles) {
        target.style.removeProperty(prop);
      }
    });
    assert_equals(target_cs.height, obj.expected_target_computed,
                  "getComputedStyle(target).height");
    assert_equals(target.getBoundingClientRect().height, obj.expected_target_border_box,
                  "target.getBoundingClientRect().height");
    assert_equals(container_cs.height, `${obj.expected_container}px`,
                  "getComputedStyle(container).height");
    assert_equals(container.getBoundingClientRect().height, obj.expected_container,
                  "container.getBoundingClientRect().height");
  }, `resolved height with styles ${JSON.stringify(obj.styles)}`);
}

</script>
